<template>
    <div>
        <h1>房屋列表</h1>
        <a target="_blank" href="https://localhost:7211/api/House/Dc">导出房屋信息</a>
        <br>
        <input type="text" placeholder="名称查询" v-model="cs.name">
        <select v-model="cs.sid">
            <option value="0">请选择状态</option>
            <option v-for="d in xl" :value="d.sid">{{ d.sname }}</option>
        </select>
        <input type="button" value="查询" class="btn btn-success" @click="show">
        <input type="button" value="重置" class="btn btn-success" @click="cz">
        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>楼层</td>
                    <td>租户</td>
                    <td>电话</td>
                    <td>面积</td>
                    <td>状态</td>
                    <td>备注</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>{{ d.id }}</td>
                    <td>{{ d.hname }}</td>
                    <td>{{ d.num }}</td>
                    <td>{{ d.name }}</td>
                    <td>
                        {{ d.phone.substring(0,3) }}****{{ d.phone.substring(7,11) }}
                    </td>
                    <td>{{ d.mj }}</td>
                    <td v-if="d.sname=='出租中'" style="color: green;">
                        {{ d.sname }}
                    </td>
                    <td v-else="d.sname=='空置'" style="color: blue;">
                        {{ d.sname }}
                    </td>
                    <td>{{ d.remark }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-success" @click="del(d.id)">
                        <input type="button" value="修改" class="btn btn-success" @click="upd(d.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{ cs.pcount }}页,一共{{ cs.count }}条,当前第{{ cs.index }}页,每页{{ cs.size }}条
        <br>
        <input type="button" value="首页" @click="fan(1)">
        <input type="button" value="上一页" @click="fan(2)">

        <input v-for="d in cs.pcount" type="button" :value="d" @click="shows(d)">

        <input type="button" value="下一页" @click="fan(3)">
        <input type="button" value="尾页" @click="fan(4)">
        <select v-model="cs.size" @change="yrl">
            <option value="2">每页2条</option>
            <option value="4">每页4条</option>
            <option value="5">每页5条</option>
            <option value="8">每页8条</option>
        </select>
        <input type="number" v-model="cs.index">
        <input type="button" value="跳转" @click="tz">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router'
const router=useRouter()
//重置
const cz=()=>{
    cs.value.name="",
    cs.value.sid=0
}
//页码按钮
const shows=(d:any)=>{
    cs.value.index=d;
    show()
}
//跳转
const tz=()=>{
    if(cs.value.index>0 && cs.value.index<=cs.value.pcount){
        show()
    }
    else{
        cs.value.index=1;
        show()
    }
}
//页容量
const yrl=()=>{
    cs.value.index=1;
    show()
}
//翻页
const fan=(m:any)=>{
    if(m==1){
        cs.value.index=1;
        show()
    }

    if(m==2){
        if(cs.value.index>1){
            cs.value.index-=1;
            show()
        }
    }

    if(m==3){
        if(cs.value.index<cs.value.pcount){
            cs.value.index+=1;
            show()
        }

    }

    if(m==4){
        cs.value.index=cs.value.pcount;
        show()
    }
}

const data=ref([
    {
      "id": 1,
      "hname": "A-15-1-1",
      "name": "赵虎",
      "num": "1层",
      "phone": "13633312567",
      "mj": 12,
      "price": 1100.23,
      "deltime": null,
      "remark": "哈哈",
      "isDeleted": false,
      "sid": 1,
      "sname": "出租中"
    }
])
onMounted(()=>{
    bang()
    show()
})
//绑定
const xl=ref({})
const bang=()=>{
    axios.get("/api/House/GetStarts").then(res=>{
        xl.value=res.data
    })
}
//显示
const show=()=>{
    axios.get("/api/House/GetHouse",{params:cs.value}).then(res=>{
        data.value=res.data.data
        cs.value.count=res.data.count
        cs.value.pcount=Math.ceil(cs.value.count/cs.value.size)
    })
}
//参数
const cs=ref({
    index:1,
    size:5,
    name:'',
    sid:0,
    count:0,
    pcount:0
})
//删除
const del=(mid:any)=>{
    if(confirm('您确定要删除吗')){
        axios.get("/api/House/DelHouse",{params:{id:mid}}).then(res=>{
            if(res.data>0){
                alert('删除成功');
                show()
            }
            else{
                alert('删除失败');
                return;
            }
        })
    }
}
//修改
const upd=(mid:any)=>{
    router.push({path:"/upd",query:{id:mid}})
}
</script>

<style scoped>

</style>